<template>
    <div class="icon-body">
        <el-input
            v-model="name"
            style="position: relative"
            clearable
            placeholder="请输入图标名称"
            @clear="filterIcons"
            @input="filterIcons"
        >
        </el-input>
        <div class="icon-list">
            <div
                v-for="(item, index) in Object.keys(iconList)"
                :key="index"
                @click="selectedIcon(item)"
            >
                <svg-icon :name="item" />
                <span>{{ item }}</span>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import icons from './requireIcons';
import { ref, onMounted } from 'vue';

const name = ref<string>('');
const iconList = ref<any>({});
onMounted(() => {
    console.log('icons', icons);
    iconList.value = icons;
});
const filterIcons = () => {
    if (name.value) {
        const obj = {};
        iconList.value = {};
        obj[name.value] = iconList[name.value];
        iconList.value = obj;
    } else {
        iconList.value = icons;
    }
};
const emit = defineEmits(['selected']);
const selectedIcon = (name) => {
    emit('selected', name);
    document.body.click();
};
const reset = () => {
    name.value = '';
    // iconList.value = icons;
};
</script>

<style lang="scss" scoped>
.icon-body {
    width: 100%;
    padding: 10px;
    .icon-list {
        height: 200px;
        overflow-y: scroll;
        div {
            height: 30px;
            line-height: 30px;
            margin-bottom: -5px;
            cursor: pointer;
            width: 33%;
            float: left;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        span {
            display: inline-block;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    }
}
</style>
